<template>
  <div>
    <image
      :src="prize.imageUrl"
      class="detailbanner"
      mode="widthFix"
    ></image>
    <div class="flex-box">
      <div>
        <div>{{prize.name}}</div>
        <div>
          <span class="tipsred">{{prize.remark}}</span>
        </div>
      </div>
      <div>
        <div><span class="fontred">{{prize.score}}</span>积分</div>
        <div class="small-font">库存{{prize.currentNum}}件</div>
      </div>
    </div>
    <div class="card-box">
      <div class="strong">支持方</div>
      <div>{{prize.supply}}</div>
    </div>
    <div class="card-box">
      <div class="strong" style="color: #ffac00">兑换说明</div>
      <div> <u-parse :content="prize.description" @preview="preview" @navigate="navigate" /></div>
    </div>
    <div class="fix-box">
        <div class="fix-buttom" @click="navToinfo">
            马上兑换
        </div>
    </div>
  </div>
</template>

<script>
	var a = function (a) {
	  return a && a.__esModule ? a : {
	    default: a
	  };
	}(require("../../utils/api.js")),
	    t = require("../../utils/request.js"),
			config = require("../../utils/config.js").config,
	    utils = require("../../utils/util.js"),
	    app = getApp();
			
import uParse from "@/components/gaoyia-parse/parse.vue";
import {getPrize} from "@/api/prizeManage";
export default {
  components: {
    uParse,
  },
  data() {
    return {
      id: '',
			prize: {},
    };
  },
  onLoad(option) {
    this.id = option.id;
		this.id = '1425354328933236737';
		var that = this;
    getPrize({id: this.id}).then((result=>{
			if (result.success) {
				that.prize = result.data;
				that.prize.description = "<p>" + that.prize.description + "</p>";
				that.prize.imageUrl = utils.formatImgUrl(that.prize.bgPath, config.host);
			}
		}));
  },
  methods: {
      navToinfo(){
		    uni.navigateTo({
		        url: '/pages/welfare/exchange?id=' + this.id
		    })
		},
  },
};
</script>

<style scoped>
.fix-buttom{
    position: fixed;
    left: 5%;
    width: 90%;
    bottom: 30rpx;
    height: 100rpx;
    color: #fff;
    font-size: 35rpx;
    border-radius: 100rpx;
    background: #00b99e;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fix-box{
    height: 120rpx;
}
.strong {
  color: #000;
  font-weight: bold;
  font-size: 35rpx;
}
.card-box {
  margin: 20rpx 0;
  padding: 30rpx;
  background: #fff;
}
.detailbanner {
  width: 100%;
}
page {
  background: #f6f6f6;
}
.flex-box {
  display: flex;
  background: #fff;
  margin: 20rpx 0;
  padding: 30rpx;
  justify-content: space-between;
}
.tipsred {
  font-size: 18rpx;
  background: #00b99e;
  padding: 1rpx 5rpx;
  color: #fff;
  border-radius: 5rpx;
  margin-right: 10rpx;
}
.tipsgury {
  font-size: 18rpx;
  background: #e3e3e3;
  padding: 1rpx 5rpx;
  color: #fff;
  border-radius: 5rpx;
  margin-right: 10rpx;
}
.small-font {
  color: #999999;
  font-size: 24rpx;
}
.fontred {
  color: #f7930a;
  font-size: 40rpx;
}
</style>